
 
	<style type="text/css">
		*{
			padding: 0;
			margin:0;
			box-sizing: border-box;
		}
	</style>

	<!-- jqueryui / 侧边栏布局 start-->
	<!-- 框架的组件文档 "https://www.jqueryui.org.cn/demo/5697.html" -->
	<ul id="menu" style="position: absolute;height: 100vh">
	  <li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
	  <li><a href="#">Ada</a></li>
	  <li><a href="#">Adamsville</a></li>
	  <li><a href="#">Addyston</a></li>
	  <li>
	    <a href="#">Delphi</a>
	    <ul>
	      <li class="ui-state-disabled"><a href="#">Ada</a></li>
	      <li><a href="#">Saarland</a></li>
	      <li><a href="#">Salzburg</a></li>
	    </ul>
	  </li>
	  <li><a href="#">Saarland</a></li>
	  <li>
	    <a href="##">Salzburg</a>
	    <ul>
	      <li>
	        <a href="#">Delphi</a>
	        <ul>
	          <li><a href="#">Ada</a></li>
	          <li><a href="#">Saarland</a></li>
	          <li><a href="#">Salzburg</a></li>
	        </ul>
	      </li>
	      <li>
	        <a href="#">Delphi</a>
	        <ul>
	          <li><a href="#">Ada</a></li>
	          <li><a href="#">Saarland</a></li>
	          <li><a href="#">Salzburg</a></li>
	        </ul>
	      </li>
	      <li><a href="#">Perch</a></li>
	    </ul>
	  </li>
	  <li class="ui-state-disabled"><a href="#">Amesville</a></li>
	</ul>

	<div style="width: 100vw;height: 100vh">
		
	</div>
	<script type="text/javascript">
    	  $( "#menu" ).menu();
    	  $('#menu li').click(function(){
    	  	console.log($(this).index());
    	  });
	</script>
	<!-- jqueryui / 侧边栏布局 end-->